<template>
    <div class="goods">
        <!--头部面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图-->
        <el-card>
            <el-row>
                <el-row><el-button type="primary" class="addcatebtn" @click="addcate">添加分类</el-button></el-row>
            </el-row>
            <!--表格区-->
            <tree-table border :show-row-hover="false" :show-index="true" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false">
                <!-- 是否有效(渲染有效的小图标) -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted==false" style="color:lightgreen;"></i>
                    <i class="el-icon-error" v-else style="color:red;"></i>
                </template>
                <!-- 排序（渲染权限等级） -->
                <template slot="issort" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
                    <el-tag type="success" size="mini" v-if="scope.row.cat_level==1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-if="scope.row.cat_level==2">三级</el-tag>
                </template>
                <!-- 操作-->
                <template slot-scope="scope" slot="opt">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editcate(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deletecate(scope.row)">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页区 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryinfo.pagenum"
                :page-sizes="[3, 4, 5, 6]"
                :page-size="queryinfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!--添加分类弹出框-->
        <el-dialog
            title="提示"
            :visible.sync="addcaredialogVisible"
            width="30%"
            @close="addcateclose">
            <el-form :model="addcateruleForm" :rules="addcaterules" ref="addcateruleFormref" label-width="90px">
                <el-form-item label="分类名称:" prop="cat_name">
                    <el-input v-model="addcateruleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类:" >
                    <!--级联选择器-->
                        <el-cascader
                            clearable
                            change-on-select
                            v-model="selcectparentvalue"
                            :options="parentcatelist"
                            :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name',children:'children' }"
                             @change="selecthandleChange">
                        </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="addcaredialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addcatesure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑商品分类弹出框 -->
        <el-dialog
            title="编级分类"
            :visible.sync="editcatedialogVisible"
            width="30%"
            >
            <el-form :model="editcateruleForm" :rules="editcaterules" ref="editcateref" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editcateruleForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="editcatedialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editcatesure">确 定</el-button>
            </span>
</el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            catelist:[],//商品分类的数据列表
            queryinfo:{ //查询条件
                type:3,
                pagenum:1,
                pagesize:5
            },
            total:0,//商品分类数据条数
            columns:[{//为列表指定列的定义
                label:"分类名称",
                prop:'cat_name'
            },{
                label:'是否有效',
                type:'template',//表示将当前列定为模板页
                template:'isok' //表示当前这一列使用的模板名称
            },{
                label:"排序",
                type:'template',
                template:'issort'
            },{
                label:"操作",
                type:'template',
                template:'opt'
            }],
            addcaredialogVisible:false,//控制点击添加分类弹出框的显示和隐藏
            editcatedialogVisible:false,//控制点击编辑分类弹出框的显示和隐藏
            addcateruleForm:{
                cat_name:'',
                cat_pid:0,//父级id
                cat_level:0//分类的等级默认添加的是一级分类
            },
            editcateruleForm:{
                cat_name:""
            },
            editcaterules:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ]
            },
            addcaterules:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ]
            },
            parentcatelist:[],//获取父级分类的列表
            selcectparentvalue:[],//选中的父级具体列表数据,
            editcateid:0 //编辑分类对应选中分类的id
        }
    },
    created() {
        //获取商品分类数据
        this.getcatelist()
    },
    methods: {
        //获取商品分类数据
        async getcatelist(){
            const {data:res} = await this.$http.get('categories',{
                params:this.queryinfo
            })
            if(res.meta.status!=200) return this.$message.error("获取商品分类数据失败")
            this.catelist = res.data.result
            this.total = res.data.total
        },
        //监听pagesize改变
        handleSizeChange(e){
            this.queryinfo.pagesize =e
            this.getcatelist()
        },
        //监听pagenum改变
        handleCurrentChange(e){
            this.queryinfo.pagenum =e
            this.getcatelist()
        },
        //添加分类
        addcate(){
            this.addcaredialogVisible = true
            this.getparentcatelist()
        },
        //监听点击添加分类弹出框确定按钮的处理函数
        addcatesure(){
            //表单的预验证
            this.$refs.addcateruleFormref.validate(async (valid)=>{
                if(!valid) return
                //发起请求添加分类数据
                const {data:res} = await this.$http.post('categories',this.addcateruleForm)
                if(res.meta.status!=201) return this.$message.error("添加分类数据失败")
                this.$message.success("添加分类数据成功")
                this.getcatelist()
                this.addcaredialogVisible = false
            })
        },
        //获取联级选择器中父级数据
        async getparentcatelist(){
            const {data:res} = await this.$http.get('categories',{
                params:{
                    type:2
                }
            })
            if(res.meta.status!=200) return this.$message.error("获取父级数据失败")
            this.parentcatelist = res.data
        },
        //级连选择器选中具体选项触发的处理函数
        selecthandleChange(){
            //如果选中的数组长度大于0 证明选中了一个父级分类
            if(this.selcectparentvalue.length>0){
                //把父级id赋值给要添加的对象
                this.addcateruleForm.cat_pid =  this.selcectparentvalue[this.selcectparentvalue.length-1]
                //赋值当前的等级
                this.addcateruleForm.cat_level = this.selcectparentvalue.length
                return
            }else{
                this.addcateruleForm.cat_pid=0,
                this.addcateruleForm.cat_level=0
            }
        },
        //监听添加分类弹出框关闭
        addcateclose(){
            //清空表单数据
            this.$refs.addcateruleFormref.resetFields()
            this.selcectparentvalue = [],
            this.addcateruleForm.cat_level=0,
            this.addcateruleForm.cat_pid=0
        },
        //编辑商品分类
        editcate(row){
            this.editcatedialogVisible = true
            this.editcateruleForm.cat_name = row.cat_name
            this.editcateid = row.cat_id
        },
        //删除商品分类
        async deletecate(row){
            this.editcateid = row.cat_id
            //完成删除提醒提示
            const resultinfo = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)
            if(resultinfo!='confirm') return this.$message.info("您取消了本次删除操作")
            //确认删除 发起请求
            const {data:res} = await this.$http.delete(`categories/${this.editcateid}`)
            if(res.meta.status!=200) return this.$http.error("删除失败")
            this.getcatelist()
            return this.$message.success("删除成功")
        },
        //监听点击了编辑商品分类确定的处理函数
        editcatesure(){
            //表单预验证
            this.$refs.editcateref.validate(async (valid)=>{
                if(!valid) return
                //发起请求修改分类名称
                const {data:res} = await this.$http.put(`categories/${this.editcateid}`,this.editcateruleForm)
                if(res.meta.status!=200) return this.$message.error("更新分类名称失败")
                this.getcatelist()
                this.editcatedialogVisible =false
                return this.$message.success("更新分类名称成功")
            })
        }
    },
}
</script>

<style scoped>
.addcatebtn{
    margin-bottom: 15px;
}
</style>